<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '我的钱包',
    navigationBarBackgroundColor: '#ffffff',
    enablePullDownRefresh: true,
  },
}
</route>

<template>
  <view class="wallet-container">
    <!-- 余额展示区域 -->
    <view class="balance-section">
      <text class="balance-label">账户余额（元）</text>
      <view class="balance-number">
        <text class="currency-symbol">¥</text>
        <text class="amount">{{ formatBalance(balance) }}</text>
      </view>
    </view>

    <!-- 充值操作区 -->
    <view class="action-section">
      <button class="recharge-btn" @tap="handleRecharge">立即充值</button>
    </view>

    <!-- 交易记录列表 -->
    <view class="transaction-list">
      <view v-if="transactions.length === 0" class="empty-tips">
        <image src="/static/empty-wallet.png" mode="aspectFit" />
        <text>暂无交易记录</text>
      </view>

      <view v-else v-for="(item, index) in transactions" :key="index" class="transaction-item">
        <view class="left-content">
          <text class="time">{{ formatDate(item.createTime, 'YYYY-MM-DD HH:mm') }}</text>
          <text class="order-number">订单号：{{ item.orderId }}</text>
        </view>
        <view class="right-content">
          <text :class="['amount', item.recordType == RecordType.RECHARGE ? 'income' : 'expense']">
            {{ item.recordType == RecordType.RECHARGE ? '+' : '-' }}¥{{
              Math.abs(item.amount).toFixed(2)
            }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { formatDate } from '@/utils/index'
import { getBalanceInfo, getBalanceRecords } from '@/service/user/balance'
import { CustomerBalanceRecord, RecordType } from '@/service/user/balance.d'

// 响应式数据
const balance = ref<number>(0)
const transactions = ref<CustomerBalanceRecord[]>([])
const isLoading = ref(true)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 交易记录类型定义
interface Transaction {
  orderId: string
  amount: number
  createTime: number
  status: number
}

// 初始化加载
onMounted(async () => {
  await loadBalance()
  await loadTransactions()
  isLoading.value = false
})

// 加载余额数据
const loadBalance = async () => {
  try {
    const { data } = await getBalanceInfo()
    balance.value = Number(data)
  } catch (e) {
    uni.showToast({ title: '余额加载失败', icon: 'none' })
  }
}

// 加载交易记录（带分页）
const loadTransactions = async () => {
  try {
    const { data } = await getBalanceRecords({
      current: currentPage.value,
      size: pageSize.value,
    })
    transactions.value = data.records
    total.value = data.total
  } catch (e) {
    uni.showToast({ title: '记录加载失败', icon: 'none' })
  }
}

// 金额格式化（适配接口数据）
const formatBalance = (value: number) => {
  return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

// 金额显示策略
const getAmountDisplay = (record: CustomerBalanceRecord) => {
  const isIncome = record.recordType === 0 // 根据记录类型判断
  const amount = (record.amount / 100).toFixed(2)
  return `${isIncome ? '+' : '-'}¥${amount}`
}

// 充值操作
const handleRecharge = () => {
  uni.navigateTo({
    url: '/pages/my/recharge/index',
  })
}
</script>

<style lang="scss" scoped>
.wallet-container {
  min-height: 100vh;
  padding: 24rpx 32rpx;
  background: #f5f6fa;

  .balance-section {
    padding: 48rpx 32rpx;
    background: linear-gradient(135deg, $uni-bg-themes-abate, $uni-bg-themes);
    border-radius: 24rpx;
    box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.15);

    .balance-label {
      display: block;
      margin-bottom: 16rpx;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
    }

    .balance-number {
      display: flex;
      align-items: baseline;

      .currency-symbol {
        margin-right: 12rpx;
        font-size: 48rpx;
        color: #fff;
      }

      .amount {
        font-family: DINAlternate-Bold;
        font-size: 64rpx;
        font-weight: 600;
        color: #fff;
      }
    }
  }

  .action-section {
    margin: 48rpx 0;

    .recharge-btn {
      height: 96rpx;
      font-size: 32rpx;
      line-height: 96rpx;
      color: #fff;
      background: $uni-bg-themes;
      border-radius: 64rpx;
      box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.3);
    }
  }

  .transaction-list {
    padding: 0 32rpx;
    background: #fff;
    border-radius: 24rpx;

    .empty-tips {
      padding: 64rpx 0;
      text-align: center;

      image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 32rpx;
      }

      text {
        display: block;
        font-size: 28rpx;
        color: #999;
      }
    }

    .transaction-item {
      display: flex;
      justify-content: space-between;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .left-content {
        flex: 1;

        .time {
          display: block;
          margin-bottom: 12rpx;
          font-size: 28rpx;
          color: #333;
        }

        .order-number {
          font-size: 24rpx;
          color: #999;
        }
      }

      .right-content {
        .amount {
          font-family: DINAlternate-Bold;
          font-size: 32rpx;

          &.income {
            color: #52c41a;
          }

          &.expense {
            color: #f5222d;
          }
        }
      }
    }
  }
}
</style>
